<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/admin/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/admin/css/public.css" media="all">
</head>
<style>
    #query{
        position: absolute;
        top: 0px;
        left: 220px;
    }
</style>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">订单号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="orderOdd" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">面单号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="courierOdd" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-input-inline">
                <select name="quiz" id="quzi">
                    <option value="0">保存</option>
                    <option value="1">已配载</option>
                    <option value="2">发货</option>
                    <option value="3">运抵</option>
                    <option value="4">已签收</option>
                    <option value="5">已回单</option>
                    <option value="6">异常</option>
                </select>
                <button type="button" class="layui-btn layui-btn-normal" lay-event="query" id="query"> 查询 </button>

            </div>
        </script>

        <script type="text/html" id="toolbarTrsce">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="lookTail">点击查看</button>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="employeeTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script src="/static/admin/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['jquery', 'laydate', 'util', 'layer', 'table', 'form'], function ($, laydate, util, layer, table, form) {

        table.render({
            elem: '#currentTableId',
            url: '/admin/order/queryOrderPage',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                {type: "checkbox", width: 50},
                {
                    field: 'btn',
                    width: 60,
                    align: 'center',
                    templet: function (d) {
                        return '<a style="width: 100%; height: 100%;cursor: pointer;" lay-event="addRowTable">+</a>'
                    }
                },
                {field: 'orderOdd', width: 180, title: '订单号', align: "center"},
                {field: 'courierOdd', width: 160, title: '面单号', align: "center"},
                {field: 'orderDate', width: 180, title: '开单日期', align: "center",sort: true},
                {field: 'orderStatus', width: 100, title: '订单状态',align: "center",
                    templet:function(obj){
                        if(obj.orderStatus =='0'){
                            return '<span style="color:white;background: #f0ad4e">保存</span>'
                        }else if(obj.orderStatus =='1'){
                            return '<span style="color:white;background: #5cb85c"">已配载</span>'
                        }else if(obj.orderStatus =='2'){
                            return '<span style="color:white;background: #9932CC"">发运</span>'
                        }else if(obj.orderStatus =='3'){
                            return '<span style="color:white;background: #5bc0de"">运抵</span>'
                        }else if(obj.orderStatus =='4'){
                            return '<span style="color:white;background: greenyellow"">已签收</span>'
                        }else if(obj.orderStatus =='5'){
                            return '<span style="color:white;background: green"">已回单</span>'
                        }else if(obj.orderStatus =='6'){
                            return '<span style="color:white;background: red"">异常</span>'
                        }else{
                            return '<span></span>'
                        }
                    }
                },
                {field: 'userName', width: 100, title: '客户名',align: "center"},
                {field: 'userPhone', width: 100, title: '客户电话',align: "center"},
                {field: 'sendAddress', width: 100, title: '出发网点',align: "center"},
                {field: 'goalAddress', width: 100, title: '目的网点',align: "center"},
                {field: 'cargoNmae', width: 120, title: '货名',align: "center"},
                {field: 'number', width: 60, title: '数量',align: "center"},
                {field: 'weight', width: 60, title: '重量',align: "center"},
                {field: 'volume', width: 60, title: '体积',align: "center"},
                {field: 'totalMoney', width: 100, title: '货值',align: "center"},
                {field: 'makeCargoMethod', width: 100, title: '交付方式',align: "center",
                    templet:function (res) {
                    console.log(res.makeCargoMethod );
                        if (res.makeCargoMethod == '1') {
                            return '<span style="color: #1E9FFF">送货</span>'
                        }else if (res.makeCargoMethod == '0') {
                            return '<span style="color: #FFB800">自提</span>'
                        }
                    }
                },
                {field: 'sendOutDate', width: 180, title: '实际发运日期',align: "center"},
                {field: 'arriveDate', width: 180, title: '实际运抵日期',align: "center"},
                {title: '在途追踪', width: 100, toolbar: '#toolbarTrsce', align: "center"},
                {field: 'feeName', width: 100, title: '运输性质',align: "center",
                    templet:function (obj) {
                        if (obj.feeName == '加急'){
                            return '<span style="color:red;">加急</span>'
                        } else {
                            return '<span>普通</span>'
                        }
                    }
                },
                {field: 'receiptStart', width: 100, title: '是否回单',align: "center",
                    templet:function(obj){
                        if(obj.receiptStart =='0'){
                            return '<span style="color:white;background: #777">否</span>'
                        }else if(obj.receiptStart =='1'){
                            return '<span style="color:white;background: #5cb85c"">是</span>'
                        }
                    }
                },
                {field: 'createTime', width: 90, title: '创建日期',align: "center"},
                {field: 'employeeName', width: 80, title: '操作人',align: "center"},
                {field: 'updateTime', width: 90, title: '修改日期',align: "center"},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });


        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });


        table.on('toolbar(employeeTableFilter)', function (obj) {
            if (obj.event === 'query') {  // 监听添加操作
                //执行搜索重载
                table.reload('currentTableId', {
                    page: {
                        curr: 1
                    }
                    , where: {
                        orderStatus: $("#quzi").val()
                    }
                }, 'data');


            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
        });


        table.on('tool(employeeTableFilter)',function (obj) {
            var data = obj.data; //获得当前行数据
            //获取当前行的id
            var orderOdd= data.orderOdd;
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            // 异常不要用它原来的这个作为tr的dom
            // var tr = obj.tr; //获得当前行 tr 的DOM对象
            var $this = $(this);
            var tr = $this.parents('tr');
            var trIndex = tr.data('index');

            if (obj.event === 'addRowTable') {

                // 外围的table的id + tableIn_ + 当前的tr的data-index
                $(this).attr('lay-event', 'fold').html('-');
                var tableId = 'tableOut_tableIn_' + trIndex;
                var _html = [
                    '<tr class="table-item " style="background-color: white;width: 1000px">',
                    '<td colspan="' + tr.find('td').length + '" style="padding: 0px 5px;">',
                    '<table id="' + tableId + '" style="margin-top:-8px" ></table>',
                    '</td>',
                    '</tr>'
                ];
                tr.after(_html.join('\n'));

                // 渲染table
                table.render({
                    elem: '#'+tableId,
                    url: '/admin/order/getOrderServiceFee/'+orderOdd,
                    totalRow: true,
                    done:function (res) {
                        var money = 0;

                       res.data.forEach(function (obj) {

                           money += parseFloat(obj.income);
                       });
                       money = money - res.data[0].discount;
                        this.elem.next().find('.layui-table-total td[data-field="income"] .layui-table-cell').text(money);
                    },
                    cols: [
                        [
                        {field:'feeName',title: '费用名',align:'center',width:'200', totalRowText: '合计'},
                        {field:'amountReceivable',title: '应收',align:'center',width:'200',totalRow:"true"},
                        {field:'taxRate', title: '税率',align:'center',width:'200'},
                        {field:'taxes', title: '税金',align:'center',width:'200',totalRow:"true"},
                        {field:'income', title: '实收',align:'center',width:'200',totalRow:"true"}
                    ]
                    ]
                });

            }else if(obj.event === 'lookTail'){
                var index = layer.open({
                    type:1,
                    title:'在途追踪'
                    ,area:['800px','400px']
                    ,content:$("#traceTable"),
                    btn:'确定',
                    yes:function (obj) {
                        layer.close(index);
                    }
                });

                table.render({
                    elem: '#traceTableId',
                    url: '/admin/order/getOrderTail/'+orderOdd,
                    defaultToolbar: [''],
                    cols:[
                        [
                            {type:'numbers'},
                            {field: 'orderTailTime', minWidth: 140, title: '跟踪时间',align: "center"},
                            {field: 'orderTailIncident', minWidth: 200, title: '跟踪事件',align: "center"}
                        ]
                    ]
                });
            }else if (obj.event === 'delete'){
                $.ajax({
                    type:'post',
                    url:'/admin/order/logicDeleteOrder',
                    data:{orderOdd:orderOdd},
                    dataType:'json',
                    success:function (data) {
                        var tableData = table.cache['currentTableId'];
                        table.reload('currentTableId',{data : tableData});
                    }
                });

            }else if(obj.event === 'edit'){
                layer.open({
                    type:1,
                    title:'订单修改'
                    ,area:['1000px','666px']
                    ,content:$("#editOrder"),
                    btn:'确定',
                    success:function (res) {

                    }

                });
            } else {
                $(this).attr('lay-event', 'addRowTable').html('+');
                tr.next().remove();
            }
        });
    });
</script>

</body>
<form style="display: none" id="traceTable">
    <table class="layui-hide" id="traceTableId" lay-filter="traceTableFilter"></table>
</form>
<form style="display: none" id="editOrder">
    <div class="">

    </div>
</form>
</html>
